<template>
    <div class="orderRecords">
        <div class="orderRecords-container">
            <div class="orderRecords-container-top">
                    <div class="top-left">操作记录</div>
                    <div class="top-right" @click="router.replace({path: '/order/orderTable'})">关闭</div>
            </div>
            <div class="orderRecords-container-nav">
                    <div class="upper-item">
                        <div class="book-title">开始时间：</div>
                        <el-date-picker
                            v-model="recordsForm.stratDate"
                            type="datetime"
                            placeholder="选择日期时间"
                           
                        >
                        </el-date-picker>
                    </div>
                    <div class="upper-item">
                        <div class="book-title">结束时间：</div>
                        <el-date-picker
                            v-model="recordsForm.endDate"
                            type="datetime"
                            placeholder="选择日期时间"
                        >
                        </el-date-picker>
                    </div>
                    <div class="upper-item" @click="allTableSelectShow = true">
                        <div class="book-title">桌台号：</div>
                        <el-input v-model="recordsForm.roomName" placeholder="请选择桌台号" readonly ></el-input>
                    </div>
                    <div class="upper-item">
                        <div class="book-title">操作类型：</div>
                        <el-select v-model="recordsForm.stateCode" placeholder="请选择" :suffix-icon="IconDropDown"  @change="opeStateChange">
                            <el-option
                            v-for="item in opeStateList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="upper-item">
                        <div class="book-title">台单号：</div>
                        <el-input v-model="recordsForm.consumeCode" placeholder="请输入内容" @input="keyChange"></el-input>
                    </div>
                    <div class="upper-item">
                        <div class="search" @click="search">查询</div>
                        <div class="clear" @click="reSet">清空筛选</div>
                    </div>
           
            </div>
            <div class="orderRecords-container-main">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    header-row-class-name="tableHeaderRowClassName"
                >
                    <el-table-column prop="consumeCode" label="台单号" min-width="20%" align="center"> </el-table-column>
                    <el-table-column label="操作时间" min-width="20%"  align="center">
                        <template #default="scope">{{ valiTimeSpe(scope.row.crDate) }}</template>
                    </el-table-column>
                    <el-table-column prop="waiterUserName" label="操作人" min-width="10%" align="center"> </el-table-column>
                    <el-table-column prop="roomName" label="桌台" min-width="10%" align="center"> </el-table-column>
                    <el-table-column prop="stateName" label="操作类型" min-width="10%"  align="center"> </el-table-column>
                    <el-table-column prop="remark" label="操作详情" min-width="20%"  align="center"> </el-table-column>
                </el-table>
            </div>
            <div class="orderRecords-container-footer">
                <el-pagination
                    background 
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    v-model:currentPage="recordsForm.pageIndex"
                    :page-size="recordsForm.pageSize"
                    layout="total, prev, pager, next,sizes, jumper"
                    :total="total"
                >
                </el-pagination>
                 <button class="footer-button">确定</button>
            </div>
        </div>
    </div>
    <AllTableSelect v-model="allTableSelectShow" @cancel="allTableSelectShow = false" @confirm="selectTable"></AllTableSelect>
</template>

<script setup>
import Api from '@/api'
import dayjs from "dayjs"
import ls from '@/lib/ls'
import IconDropDown from '@/components/Icon/IconDropDown.vue'
import AllTableSelect from '@/views/components/AllTableSelect.vue'
import { valiTimeSpe } from '@/lib/util.js'
import { ElNotification } from 'element-plus'
const router = useRouter()
console.log(ls.get('TABLE_INFO'));
const tableInfo = ls.get('TABLE_INFO')
const recordsForm = ref({
    stratDate:tableInfo.startTime, // 开台时间
    endDate:dayjs().format('YYYY-MM-DD HH:mm:ss'), // 结束时间
    roomCode:tableInfo.roomCode, // 房台号
    roomName:tableInfo.roomName,
    stateCode:'',
    stateName:'',
    consumeCode:tableInfo.consumeCode,
    pageSize:10, // 
    pageIndex:1
})
const tableData = ref([])
const allTableSelectShow = ref(false)
// 选中桌台
const selectTable = (data)=>{
    if(data.name){
        console.log(data);
        recordsForm.value.roomCode = data.code
        recordsForm.value.roomName = data.name
        allTableSelectShow.value = false
    }else{
        ElNotification({
          title: '提示',
          message: '请选择桌号',
          type: 'warning',
        })
    }
    
}
// 操作类型修改
const opeStateChange = (e)=>{
    console.log(recordsForm.value.stateCode = e);
    if(e == '-1'){
        recordsForm.value.stateCode = ''
    }
}
const opeStateList = ref([{
    label:'开台',
    value:'0'
},{
    label:'转入',
    value:'1'
},{
    label:'预订',
    value:'2'
},{
    label:'取消预订',
    value:'3'
},{
    label:'并台',
    value:'4'
},{
    label:'复台',
    value:'5'
},{
    label:'结账',
    value:'6'
},{
    label:'反结账',
    value:'7'
},{
    label:'清台',
    value:'8'
},{
    label:'买单',
    value:'9'
},{
    label:'点单',
    value:'10'
},{
    label:'修改基础信息',
    value:'11'
},{
    label:'维修',
    value:'12'
},{
    label:'正常',
    value:'13'
},{
    label:'锁定',
    value:'14'
},{
    label:'转出',
    value:'15'
},{
    label:'无',
    value:'-1'
}])
// 台单号修改
const keyChange = (e)=>{
    recordsForm.value.key = e
}
// 清空筛选 
const reSet = ()=>{
    recordsForm.value = {
    stratDate:'', // 开台时间
    endDate:'', // 结束时间
    roomCode:'', // 房台号
    roomName:'',
    stateCode:'',
    stateName:'',
    consumeCode:'',
    pageSize:10, // 
    pageIndex:1
}
}
const total = ref()
// 查询
const search = (flag)=>{
    if(flag){
        recordsForm.value.pageIndex = 1
    }
    console.log(recordsForm.value);
    Api.Common.PcObjProcess.Do({"functionName":"GetRoomOpeHistory","contentData":recordsForm.value})
        .then(res=>{
            console.log(res);
            ElNotification({
                title: '提示',
                message: '查询成功',
                type: 'success',
            })
            tableData.value = res.data
            total.value = res.totalCount
    })
}
search(true)

// 每页多少条更换
const handleSizeChange = (e)=>{
    console.log(e);
    recordsForm.value.pageSize = e
    search(true)
}
// 页码更换
const handleCurrentChange = (e)=>{
    console.log(e);
    recordsForm.value.pageIndex = e
    search()
}
</script>

<style scoped lang="scss">
.orderRecords{
    background: #F2F2F2;
    white-space: nowrap;
    height: 100%;
    .orderRecords-container{
        margin: 0 auto;
        width: 1200px;
        padding: 20px 0 0 0;
        .orderRecords-container-top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 12px;
            .top-left{
                font-family: Microsoft YaHei;
                font-weight: bold;
                font-size: 20px;
                color: #212121;
                line-height: 20px;
            }
            .top-right{
                width: 100px;
                height: 48px;
                background: #CCCCCC;
                border-radius: 8px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #212121;
                line-height: 48px;
                text-align: center;
                cursor: pointer;
            }
        }
        .orderRecords-container-nav{
            width: 1200px;
            height: 156px;
            background: #FFFFFF;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            padding-top: 20px;
            margin-bottom: 20px;
            .upper-item{
                display: flex;
                flex-basis: 33.33%;
                align-items: center;
                margin-bottom: 20px;
                ::v-deep(.el-date-editor .el-range__icon){
                    display: none
                }
                .book-title{
                    width: 120px;
                    text-align: right;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                    line-height: 16px;
                }
                .search{
                    width: 120px;
                    height: 48px;
                    background: #FFE566;
                    border-radius: 8px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #212121;
                    line-height: 48px;
                    text-align: center;
                    margin-right: 20px;
                    margin-left: 120px;
                    cursor: pointer;
                }
                .clear{
                    width: 120px;
                    height: 48px;
                    background: #E6E6E6;
                    border-radius: 8px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #666666;
                    line-height: 48px;
                    text-align: center;
                    cursor: pointer;
                }
            }
            ::v-deep(.el-date-editor.el-input){
                width: 260px;
                height: 48px;
            }
            ::v-deep(.el-select__wrapper) {
                width: 260px;
                height: 48px;
            }
            ::v-deep(.el-input__wrapper ){
                width: 260px;
                height: 48px;
            }
            ::v-deep(.el-select){
                width: 260px;
                height: 48px;
            }
            ::v-deep(.el-input){
                width: 260px;
                height: 48px;
            }
        }
        .orderRecords-container-main{
            width: 1200px;
            height: 606px;
            background: #FFFFFF;
            border-radius: 8px;
            padding: 20px 60px 0;
            overflow: auto;
            ::v-deep(.tableHeaderRowClassName th){
                height: 48px;
                background: #F9F9F9;
                border-radius: 8px;
            }
            ::v-deep(.el-table td.el-table__cell){
                border-bottom: none;
                height: 46px;
                
            }
            ::v-deep(.el-table__inner-wrapper:before ){
                display: none;
            }
             ::v-deep(.cell){
                font-family: Source Han Sans CN;
                font-weight: 500;
                font-size: 14px;
                color: #212121;
                line-height: 14px;
                padding: 10px 0;
                // height: 45px;
            }
        }
        .orderRecords-container-footer{
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 20px;
            .footer-button{
                background: #FF6A00;
                border-radius: 8px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #FFFFFF;
                line-height: 18px;
                padding: 15px 22px;
                margin-left: 20px;
                cursor: pointer;
            }
            ::v-deep(.el-pagination){
                // width: 100%;
            }
            ::v-deep(.el-pagination>.is-first ){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
            ::v-deep(li.number){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
            ::v-deep(.el-select__wrapper){
                width: 140px;
                height: 48px;
                background: #E6E6E6;
                border-radius: 8px;
                // margin-right: 20px;
            }
            ::v-deep(.el-pagination.is-background .el-pager li ){
                width: 48px;
                height: 48px;
                border-radius: 8px;
                background-color: #E6E6E6 ;
            }
            ::v-deep(.el-pagination>.is-last){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
            ::v-deep(.el-input__wrapper){
                width: 80px;
                height: 48px;
                background: #E6E6E6;
                border-radius: 8px;
            }
            ::v-deep(.el-pagination .el-input__inner ){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
            ::v-deep(.el-pagination.is-background .el-pager li.is-active){
                background-color: #FF6A00 !important;
                color: var(--el-color-white);
            }
            ::v-deep(.el-select__placeholder){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
        
            // ::v-deep(.el-pagination button *){
            //   width: 15px;
            //   height:24px;
            //   font-size: 18px;
            //   color: #666666;
            //   line-height: 18px;
            // }
        }
   }
}
</style>
